<template>
  <a-spin dot :loading="isLoading" style="height: calc(100% - 44px)">
    <div class="app-container form-container">
      <a-breadcrumb style="margin-bottom: 20px">
        <a-breadcrumb-item>系统设置</a-breadcrumb-item>
        <a-breadcrumb-item>表单设置</a-breadcrumb-item>
      </a-breadcrumb>
      <micro-app
        v-if="!isError"
        class="micro-app"
        name="form-design"
        :url="appUrlConfig.formDesign"
        baseroute="/form-design"
        :data="{ token: getToken() }"
        fiber
        router-mode="native"
        @mounted="microAppMounted"
        @error="onError"
      />
      <ErrorPage v-else :code="500"></ErrorPage>
    </div>
  </a-spin>
</template>

<script setup>
import { getToken } from "@/utils/auth";
import appUrlConfig from "@/config/appUrlconfig";
import ErrorPage from "@/views/error/components/ErrorPage.vue";

const isLoading = ref(true);
const microAppMounted = () => {
  isLoading.value = false;
};

const isError = ref(false);
const onError = () => {
  isError.value = true;
  isLoading.value = false;
};
</script>

<style scoped lang="scss">
.form-container {
  height: 100%;
  overflow-y: auto;
}
.micro-app,
:deep(micro-app-body) {
  height: calc(100% - 44px);
}
</style>
